<template>
    <div id="app" class="square-detail" :class="{'page-loading':page.status == 0}">
        <scroll-fixed>
            <a href="javascript:;" @click="appDownload" class="app-download" :class="{'hide':hideDownload}">
                <div class="app-logo">
                    <img src="../../assets/app_logo.png"> 泛亚资讯
                </div>
                <span>打开</span>
            </a>
            <page-bar @right="moreConfig.status = true">
                <p slot="middle">动态详情</p>
            </page-bar>
        </scroll-fixed>
        <template v-if="page.status == 1">
            <scroll-list ref="scroll" class="ui-list" :disabled="true" :config="scroll" @bottom="loadmore">    
                <div class="cont" :class="{'xs':moreConfig.range == 1,'sm':moreConfig.range == 2,'normal':moreConfig.range==3,'md':moreConfig.range == 4,'lg':moreConfig.range == 5}">
                    <square-item
                        @delete="unlikeHandle"
                        @item-share="moreConfig.status = true"  
                        :item="detail"/>
                </div>
                <div class="comment-list">
                    <div class="list">
                        <p class="tit">全部评论<template v-if="info.comment_count>0">({{info.comment_count}})</template></p>
                        <div v-if="comment.list.length == 0">
                            <div class="list-empty">
                                <img src="@/assets/empty-comment.png" >
                                <p>沙发已为您准备好，请入座</p>
                            </div>
                        </div>
                        <div v-else>
                            <ui-comment-item v-for="item in comment.list" :item="item" :showInfo="false" :type='5' :key="item.id" @del="delItem"></ui-comment-item>
                        </div>
                    </div>
                </div><!-- comment-list -->
            </scroll-list>
            <popup-more :status="moreConfig.status" :config="moreConfig" @font="fontChange" @report="report" @unlike="unlikeHandle" @close="moreConfig.status = false" @fav="changeFav" @night="changeNight"></popup-more>

            <ui-comment ref="comment" @done="commentDone"/>
        </template>
        <ui-loading v-else-if="page.status == 0">
            <div slot="content"></div>
        </ui-loading>
        <page-error v-else @refresh="pageRefresh"></page-error>
    </div>
</template>
<script>
import pageError from '@/components/pageError.vue'
import UILoading from '@/components/loading.vue'
import scrollFixed from "@/components/scrollFixed.vue";
import pageBar from "@/components/pagebar.vue";
import ScrollList from "@/components/scrollList.vue";
import items from "@/square/components/items.vue";
import UIComment from '@/components/comment.vue'
import commentItem from "@/components/commentItem.vue";
import MoreBox from '@/components/morebox.vue'
import Lazy from '@/plugins/lazy.js'

export default {
    name:'square-detail',
    components: {
        [scrollFixed.name]: scrollFixed,
        [ScrollList.name]: ScrollList,
        [items.name]: items,
        [UILoading.name]: UILoading,
        [UIComment.name]: UIComment,
        [commentItem.name]: commentItem,
        [MoreBox.name]: MoreBox,
        [pageError.name]: pageError,
        [pageBar.name]: pageBar
    },
    data(){
        return {
            lazy:new Lazy(),
            hideDownload:false,
            page:{
                status:0,
            },
            info:{
                comment_count:0,
                type:2
            },
            detail:{
                id:''
            },
            comment:{
                page_no:1,
                is_end:false,
                list:[]
            },
            moreConfig:{
                id:'',
                type:2,
                status:false,
                fav:false,
                night:false,
                font:true,
                range:3,
                email_title:'泛亚资讯 动态详情',
                email_content:' '
            },
            scroll:{
                bottom:false
            },
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm=>{
            if(to.params.init_data){
                vm.detail = to.params.init_data;
                vm.page.status = 1;
                vm.scroll.bottom = 'hidden';
                vm.info.comment_count = vm.detail.comment_count;
                vm.moreConfig.email_content = vm.detail.content;
                vm.$nextTick(()=>{
                    vm.$refs.comment.$emit('init',{type:'add',from:'hidden',count:vm.info.comment_count,info:vm.info});
                    this.lazy.update();
                })
            }else{
                vm.$emit('pageRefresh');
            }
        })
    },
    mounted(){
        this.$on('pageRefresh',()=>{
            this.page.status = 0;

            this.getDetail().then(()=>{
                this.$nextTick(() => {
                    this.info.comment_count = this.detail.comment_count;
                    this.$refs.comment.$emit('init',{type:'add',from:'hidden',count:this.info.comment_count,info:this.info});
                    this.lazy.update();
                });
            }).catch(e=>{
                this.page.status = -1;
            })

            this.getCommentList().then(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = this.comment.list.length == 0 ? 'hidden' : (this.comment.is_end ? 'done' : false);
                });
            })

        })

        //获取默认字体大小
        let font = this.$utils.caches.get('font');
        this.moreConfig.range = isNaN(parseInt(font)) ? 3: parseInt(font);

        if(this.$route.query.id){
            this.detail.id = this.$route.query.id;
            this.info.id = this.$route.query.id;
            this.moreConfig.id = this.$route.query.id;
        }

        !this.isApp && this.$on('SCROLL',(e,params)=>{
            this.hideDownload = params.top >= params.height * 0.9;     
        })

    },
    methods:{
        appDownload(){
            location.href = this.$utils.app.link.open_circle + '' + this.detail.id;

            setTimeout(()=>{
                if (this.$utils.app.ios) {
                    location.href = this.$utils.app.download.ios
                } else {
                    location.href = this.$utils.app.download.android
                }
            },2000);
        },
        report(){
            this.moreConfig.status=false;
            this.$router.push({name:'report',query:{id:this.detail.id}});
        },
        unlikeHandle(){
            this.$store.commit('deleteFieldByKey',{
                key:'SQUARE_LIST',
                field:'id',
                value:this.detail.id
            });

            this.$store.commit('deleteFieldByKey',{
                key:'SQUARE_SEARCH',
                field:'id',
                value:this.detail.id
            });
            history.back();

        },
        fontChange(range){
            this.moreConfig.range = range;
            this.$utils.caches.set('font',range);
        },
        changeFav(flag){
            this.moreConfig.fav = flag;
            this.moreConfig.status = false;
        },
        changeNight(flag){
            this.moreConfig.night = !this.moreConfig.night;
            this.moreConfig.status = false;
        },
        commentDone(rs){
            this.comment.list.unshift(rs)
            this.info.comment_count = this.comment.list.length;
        },
        getDetail(){
            return this.$http.get('?ct=member_publish&ac=detail&id=' + this.detail.id)
                .then(response => {
                    let { data } = response;
                    if (data.code == 0) {
                        let res = data.data;
                        this.detail = res;
                        this.moreConfig.email_content = this.detail.content;
                        this.page.status = 1;
                    }else{
                        this.$toast(data.msg);
                    }
                }).catch(e=>{
                    this.$toast('获取数据失败');
                })
        },
        getCommentList(){
            return this.$http.get('?ct=comment&ac=get_list&foreign_id='+this.detail.id+'&page_no='+this.comment.page_no).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    this.comment.is_end = !data.data.is_have_data;
                    this.comment.list = this.comment.list.concat(data.data.list);
                    this.comment.page_no++;
                }else{
                    this.$toast(data.msg);
                }
            }).catch(e=>{
                this.$toast('获取评论数据失败');
            })
        },
        loadmore(){
            if (this.scroll.bottom || this.comment.is_end) return false;
            this.scroll.bottom = true;
            this.getCommentList().then(() => {
                this.$nextTick(() => {
                    this.scroll.bottom = this.comment.is_end ? 'done' : false;
                });
            });
        },
        delItem(id) {
            let item = this.comment.list.filter((res)=> {
                return res.id == id
            })
            let index = this.comment.list.indexOf(item[0]);
            if(index != -1) {
                this.comment.list.splice(index, 1);
                this.info.comment_count = this.comment.list.length;
            }
        },
        pageRefresh(){
            this.$emit('pageRefresh');
        },
    }
}
</script>
<style lang="less">
.square-detail {
    .cont {
        &.normal .item-cont>p{
            font-size:36px!important;
        }
        &.xs .item-cont>p{
            font-size:28px!important;
        }
        &.sm .item-cont>p{
            font-size:32px!important;
        }
        &.md .item-cont>p{
            font-size:40px!important;
        }
        &.lg .item-cont>p{
            font-size:44px!important;
        }
    }
    .ui-list {
        //底部栏的高度
        padding-bottom:104px;
    }
    .comment-list {
        padding:30px;
        margin-top:10px;
        background-color:#fff;
        .list {
            &>.tit {
                font-size:28px;
                color:#282828;
                font-weight: bold;
                margin-bottom:8px;
            }
        }
    }
    .list-empty {
        position: relative;
        img {
            display: block;
            width:100%;
            height:auto;
        }
        p {
            position: absolute;
            bottom:30px;
            left:0;
            right: 0;
            color:#ccc;
            text-align: center;
            font-size:24px;
        }
    }  
}

</style>

